Dealing with Overflowing Content
Description
Overflow happens with the container is too small to fully display its content.
We can change the overflow behavior by using the overflow properties.
- overflow-x
overflow-y
Set the horizontal or vertical overflow style.
Value:auto or hidden or no-content or no-display or scroll or visible - overflow
Shorthand property.
Value: overflow or overflow-x or overflow-y
The overflow-x and overflow-y properties set the style
for horizontal and vertical overflows.
The overflow shorthand property lets you define the style for both directions in a single declaration.
- auto
leaves the browser to work out what to do. - hidden
The content is clipped so that only the portion inside the content box is displayed.
No mechanism is provided for the user to see the clipped part of the content. - no-content
The content is removed if it cannot be displayed completely. - no-display
The content is hidden if it cannot be displayed completely. - scroll
The browser will add a scrolling mechanism so that the user can see the content. -
visible
This is the default value.
The element's content is displayed, even though it overflows the content box.
Example
The following code shows the overflow properties in use.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w ww . ja v a 2s . c o m-->
width: 200px;
height: 100px;
border: medium double black;
}
#first {
overflow: hidden;
}
#second {
overflow: scroll;
}
</style>
</head>
<body>
<p id="first">This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
</p>
<p id="second">This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
This is a test.This is a test.This is a test.This is a test.
</p>
</body>
</html>